<%@ page import="com.zzn.bookManage.pojo.ResultEntity" %>
<%@ page import="com.zzn.bookManage.pojo.Book" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.zzn.bookManage.pojo.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="loginUser" class="com.zzn.bookManage.pojo.User" scope="session"/>
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>借阅管理</title>
  <%@ include file="head.jsp" %>
</head>
<body>

<%!
  ResultEntity<Book> result;
  List<Book> books;
  List<User> users;
  String msg;
%>
<%
  request.setCharacterEncoding("UTF-8");
  msg = (String) request.getAttribute("msg");
  users = (List<User>) request.getAttribute("users");
  result = (ResultEntity<Book>) request.getAttribute("result");
  result = result!=null? result :new ResultEntity<>();
  users = users!=null? users :new ArrayList<>();
  books = result.hasData()?result.getData():new ArrayList<>();
%>

<div id="app">
  <div class="container">
    <div class="row primary-bg align-items-center">
      <div class="col-3">
        <img src="./assets/logo.png" class="m-auto card-img-top" alt="logo" style="width: 80px">
      </div>
      <div class="col-auto ml-auto">
        <span>Hello! <strong><%=loginUser.getNickname()%></strong></span>
        <form action="${pageContext.request.contextPath}/userLogout" method="post" style="display: inline">
          <button type="submit" class="btn btn-sm btn-info ml-4">退出登录</button>
        </form>
      </div>
    </div>
    <div class="row">
      <!--      侧边栏-->
      <div class="col-md-2 col-sm-1 secondary-bg px-0" style="height: 800px">
        <div class="btn-group-vertical full-width" role="group" aria-label="Basic example">
          <a href="${pageContext.request.contextPath}/list?page=1" class="full-width">
            <button type="button" class="btn  full-width btn-my-primary" >首页</button>
          </a>
          <a href="${pageContext.request.contextPath}/setting.jsp" class="full-width">
            <button type="button" class="btn btn-my-primary full-width">用户设置</button>
          </a>
          <button type="button" class="btn btn-my-primary-active autofocus full-width">借阅管理</button>
        </div>
      </div>
      <!--      内容部分-->
      <div class="col-md-10 col-sm-11 bg-white" style="overflow: auto">
        <div class="row mt-2">

          <%
            if (msg!=null && !"".equals(msg)){
          %>
          <div class="alert alert-danger alert-dismissible fade show full-width mx-2" role="alert">
            <span><%=msg%></span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <%
            }
          %>

          <div class="col-12"><h5>借阅管理</h5></div>

          <div class="col-12">
            <table class="table table-striped">
              <thead>
              <tr>
                <th scope="col" class="text-center">#</th>
                <th scope="col" class="text-center">书名</th>
                <th scope="col" class="text-center">作者</th>
                <th scope="col" class="text-center">出版社</th>
                <th scope="col" class="text-center">存放位置</th>
                <th scope="col" class="text-center">借阅者</th>
                <th scope="col" class="text-center">到期时间</th>
                <th scope="col" class="text-center">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in books">
                <th class="text-center" scope="row">{{item.seq}}</th>
                <td class="text-center">{{item.name}}</td>
                <td class="text-center">{{item.author}}</td>
                <td class="text-center">{{item.publisher}}</td>
                <td class="text-center">{{item.position}}</td>
                <td class="text-center">{{item.borrowBy}}</td>
                <td class="text-center">{{myDateFormat(item.expireTime)}}</td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-info" :disabled="!!item.borrowBy"
                            data-toggle="modal"
                            data-target="#bookBorrow"
                            @click="borrowBook(item)"
                    >出借</button>
                    <button type="button" class="btn btn-sm btn-my-primary" :disabled="!item.borrowBy"
                            data-toggle="modal"
                            data-target="#confirmReturn"
                            @click="returnBook(item)"
                    >归还</button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!--        分页-->
        <nav aria-label="Page navigation" class="">
          <ul class="pagination justify-content-end">

            <%
              for (int i = 0; i < result.getRecords(); i++) {
            %>
            <li class="page-item <%=result.getPage()==(i+1)?"active":""%>">
              <a class="page-link" href="${pageContext.request.contextPath}/listBorrow?page=<%=i+1%>"><%=i+1%></a>
            </li>
            <%
              }
            %>

          </ul>
        </nav>

        <!--    归还弹窗-->
        <div class="modal fade" id="confirmReturn" tabindex="-1" aria-labelledby="confirmReturnLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="confirmReturnLabel">确认归还吗？</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                确认归还 《{{ returnBookName }}》 吗？
              </div>
              <div class="modal-footer">
                <form action="${pageContext.request.contextPath}/returnBook" method="post">
                  <input type="text" class="d-none" name="bid" :value="bid">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                  <button type="submit" class="btn btn-primary">归还</button>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!--    出借弹窗-->
        <div class="modal fade" id="bookBorrow" tabindex="-1" aria-labelledby="bookBorrowLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="bookBorrowLabel">选择借阅人</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label for="userSelect">借阅人</label>
                  <select class="form-control" id="userSelect" v-model="selectedUser" required>
                    <option v-for="user in users" :value="user.uid">{{user.nickname}}</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="exampleFormControlInput1">出借天数</label>
                  <input type="number" class="form-control" id="exampleFormControlInput1" required v-model="borrowDuration">
                </div>
              </div>
              <div class="modal-footer">
                <form action="${pageContext.request.contextPath}/borrowBook" method="post">
                  <input type="text" class="d-none" name="bid" :value="borrowBid">
                  <input type="text" class="d-none" name="uid" :value="selectedUser">
                  <input type="text" class="d-none" name="expireDays" :value="borrowDuration">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                  <button type="submit" class="btn btn-primary">出借</button>
                </form>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            content: '',
            books: [
                <%
                  for(int i = 0; i < books.size(); i++) {
                    int seq = result.getCount()-(result.getPage()-1)*result.getRow() - i;
                    Book b = books.get(i);
                %>
                {
                    seq: '<%=seq%>',
                    bid: '<%=b.getBid()%>',
                    name: '<%=b.getName()%>',
                    author: '<%=b.getAuthor()%>',
                    publisher: '<%=b.getPublisher()%>',
                    position: '<%=b.getPosition()%>',
                    description: '<%=b.getDescription()%>',
                    price: '￥<%=b.getPrice()%>',
                    expireTime: '<%=b.getExpireTime()!=null?b.getExpireTime():""%>',
                    borrowBy: '<%=b.getBorrowBy()!=null?b.getBorrowBy().getNickname():""%>',
                    createTime: '<%=b.getCreateTime()%>',
                },

                <%
                  }
                %>
            ],
            bookDetail: {},
            borrowDuration:7,
            selectedUser:1,
            users:[
                <%
                  for(User u: users){
                %>
                {uid: '<%=u.getUid()%>', nickname: "<%=u.getNickname()%>"},
                <%
                  }
                %>
            ],
            returnBookName:'',
            bid:'',
            borrowBid:'',
        },
        methods: {
            myDateFormat(dateStr='') {
                let str = dateStr.split('.')[0].split(' ')
                let now = new Date();
                let ii = new Date(dateStr);
                if (now.getDate() === ii.getDate()) {
                    return '今天 ' + str[1]
                } else if (now.getDate() === ii.getDate() - 1) {
                    return '昨天 ' + str[1]
                } else {
                    return dateStr.split('.')[0]
                }
            },
            returnBook: function (item) {
                this.returnBookName = item.name
                this.bid = item.bid
            },
            borrowBook: function (item) {
                this.borrowBid = item.bid
            },
        },
        computed: {
            contentLength: function () {
                return this.content.length
            }
        },
    })
</script>
</body>
</html>
